/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/8/15 12:38 下午
 * @version V1.0
 */
import React, { useState } from 'react';
import styles from './index.less';
import { Row, Col, Tree, Form, Input, Button, Empty, message, Select } from 'antd';
import SectionTitle from 'components/SectionTitle';
import { connect } from 'umi';
import UnitsModal from '@/pages/units/components/UnitsModal';
import storageUtils from 'utils/storage';

const { Option } = Select;


const layout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 3, span: 16 },
};
const Units = ({ units: { treeData, modalVisible, superiorDepartmentId }, dispatch, loading }) => {
    const [unitsInfo, setUnitsInfo] = useState({
        departmentName: '',
        departmentType: '',
        comment: '',
        departmentId: '',
    });
    const [form] = Form.useForm();
    form.setFieldsValue(unitsInfo);
    const canOperate = storageUtils.getUser().userRoleTypes.includes('Super_Admin') || storageUtils.getUser().userRoleTypes.includes('Admin');
    const onSelect = (selectedKeys, info) => {
        const { node } = info;
        dispatch({
            type: 'units/setSuperiorDepartmentId',
            payload: node.key,
        });
        const unitsInfo = {
            departmentName: node.title,
            departmentType: node.departmentType,
            comment: node.comment,
            departmentId: node.key,
        };
        setUnitsInfo(unitsInfo);
    };
    const onFinish = values => {
        values.departmentId = unitsInfo.departmentId;
        dispatch({
            type: 'units/updateDepartmentInfo',
            payload: values,
            callback: (result) => {
                if (result) {
                    dispatch({
                        type: 'units/getUnitsTreeData',
                        payload: {},
                    });
                    setUnitsInfo(values);
                }
            },
        });
    };

    const onFinishFailed = errorInfo => {
    };
    const addUnits = (f) => {
        if (f === 1 && superiorDepartmentId === 0) {
            message.warning('请选择父级单位');
            return;
        } else if (f === 0) {
            dispatch({
                type: 'units/setSuperiorDepartmentId',
                payload: 0,
            });
        }
        dispatch({
            type: 'units/setModalVisible',
            payload: true,
        });
    };
    return (
        <div className={styles.unitsContainer}>
            <Row>
                <Col span={6}>
                    <SectionTitle title={'单位'}/>
                    {
                        canOperate ? (
                            <>
                                <Button
                                    type="primary"
                                    size="small" style={{ marginBottom: '10px', marginRight: '10px' }}
                                    onClick={() => addUnits(0)}
                                >新增一级单位</Button>
                                <Button
                                    type="primary"
                                    size="small" style={{ marginBottom: '10px' }}
                                    onClick={() => addUnits(1)}
                                >新增下级单位</Button>
                            </>
                        ) : null
                    }

                    {
                        treeData.length !== 0 ? (
                            <Tree
                                showLine={{
                                    showLeafIcon: false,
                                }}
                                showIcon={false}
                                defaultExpandAll={false} // 默认展开所有树节点
                                onSelect={onSelect}
                                treeData={treeData}
                            />
                        ) : (
                            <Empty description="暂无单位信息，请添加单位！"/>
                        )
                    }
                </Col>
                {
                    unitsInfo.departmentId ? (
                        <Col span={12}>
                            <SectionTitle title={'单位信息'}/>
                            <Form
                                {...layout}
                                form={form}
                                initialValues={{ remember: true }}
                                onFinish={onFinish}
                                onFinishFailed={onFinishFailed}
                            >
                                <Form.Item
                                    label="单位名称"
                                    name="departmentName"
                                    rules={[{ required: true, message: '请输入单位名称' }]}
                                >
                                    <Input/>
                                </Form.Item>
                                <Form.Item
                                    label="单位类型"
                                    name="departmentType"
                                    rules={[{ required: true, message: '请选择单位类型' }]}
                                >
                                    <Select
                                        placeholder="请选择单位类型"
                                    >
                                        <Option value="MANAGE">管理单位</Option>
                                        <Option value="TEACH">教学单位</Option>
                                        <Option value="OFFICE">机关部门</Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item
                                    label="单位描述"
                                    name="comment"
                                    rules={[{ required: false, message: '' }]}
                                >
                                    <Input.TextArea/>
                                </Form.Item>

                                <Form.Item {...tailLayout}>
                                    {
                                        canOperate ? (<Button
                                            size="small"
                                            disabled={!unitsInfo.departmentId}
                                            type="primary"
                                            htmlType="submit"
                                        >
                                            修改
                                        </Button>) : null
                                    }

                                </Form.Item>
                            </Form>
                        </Col>
                    ) : null
                }
            </Row>
            <UnitsModal/>
        </div>
    );
};

export default connect(({ units, dispatch, loading }) => ({
    units,
    dispatch,
    loading: loading.effects['units/getUnitsTreeData'],
}))(Units);
